<script setup>
import { nextTick, onMounted, ref } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import icon_house from '@/assets/imgs/bt_sy.png'
import {
  getHouseOverview,
  getHouseSecurity,
} from '../api.js'


const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const totalBuildingChartRef = ref(null)
const totalAreaChartRef = ref(null)
const rentRateChartRef = ref(null)

const totalBuilding = ref(0)
const totalArea = ref(0)

const getOverviewChartPieOption = ({ list, title }) =>{
  return {
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    color: ['#00dfff', '#00dfff', '#f8ea9a'],
    tooltip: {
      trigger: 'item',
      fontSize: 14,
    },
    legend: {
      top: 'middle',
      left: '50%',
      orient: 'vertical',
      formatter: (name) => {
        return name + '      ' + list.find(item => item.name === name).value + (title.includes('面积') ? '万平' : ' 幢')
      },
      fontSize: 18,
      icon: "circle",
      itemGap: 20,
      itemWidth: 10,
      itemHeight: 10,
    },
    series: [
      {
        name: '60%',
        type: 'pie',
        selectedMode: 'single',
        radius: ['47%', '50%'],
        center: ['25%', '50%'],
        label: {
          position: 'center',
          fontSize: 14,
          // formatter: (params) => {
          //   return Math.floor(list[0].value / total * 100) + '%'
          // } 
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1548 },
        ]
      },
      {
        name: title,
        type: 'pie',
        radius: ['56%', '70%'],
        center: ['25%', '50%'],
        avoidLabelOverlap: false,
        showBackground: false,
        label: {
          show: true,
          fontSize: 16,
          position: 'center',
          formatter: '{d}%',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold',
            formatter: '{d}%',
          }
        },
        labelLine: {
          show: false
        },
        data: [...list]
      }
    ]
  }
}

const getRentRateChartBarCircleOption = ({ list, title }) =>{
  // const total = list.reduce((a, b) => a + b.value, 0)
  const names = list.map(item => item.name)
  const colors = ['#F59665', '#B0FDE8', '#FEF9E0']
  return {
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    angleAxis: {
      max: 100,
      show: false,
      clockwise: false,
    },
    radiusAxis: {
      type: 'category',
      z: 10,
      show: false,
    },
    polar: {
      radius: [25, '90%'],
      center: ['25%', '50%'],
    },
    series: list.map((item,i) => {
      return {
        type: 'bar',
        data: [item.value],
        coordinateSystem: 'polar',
        showBackground: true,
        name: item.name,
        itemStyle: {
          color: colors[i],
        }
      }
    }),
    tooltip: {
      show: true,
    },
    legend: {
      orient: 'vertical',
      left: '50%',
      top: 'middle',
      show: true,
      data: names,
      formatter: (name) => {
        return name + '      ' + list.find(item => item.name === name).value + '%'
      },
      label: {
        color: '#fff',
      },
      fontSize: 18,
      icon: "circle",
      itemGap: 20,
      itemWidth: 10,
      itemHeight: 10,
    },
    // 添加 graphic 组件显示图片
    graphic: {
      elements: [{
        type: 'image',
        key: 'centerImage',
        z: 100,
        style: {
          image: icon_house, // 你的图片路径
          width: 60,
          height: 60
        },
        left: '18%',
        top: 'center'
      }]
    },
  }
}

const updateChartHouseOverview = (data) => {
  const list = data.data || []
  const buildingData = [{ name: '住宅', value: 152192  }, { name: '非住宅', value: 132210  }]
  totalBuildingChartRef.value?.updateOption(getOverviewChartPieOption({ list: buildingData, title: '房屋总栋数' }))

  const areaData = [{ name: '住宅', value: 24733.55  }, { name: '非住宅', value: 28395.53  }]
  // const areaData = list.map((e) => ({ name: e.name, value: e.actual_area}))
  totalAreaChartRef.value?.updateOption(getOverviewChartPieOption({ list: areaData, title: '建筑总面积' }))

  const rentRateData = [
    { name: '国有产权出租率', value: 73.01  },
    { name: '住宅出租率', value: 75.5  },
    { name: '非住宅出租率', value: 10.87  },
  ]
  rentRateChartRef.value?.updateOption(getRentRateChartBarCircleOption({ list: rentRateData, title: '出租率' }))

  totalBuilding.value = data.houseNum ?? 0
  totalArea.value = data.houseArea ?? 0
}

const barColors = ['#047dbd', '#b58a37']
const getBarChartOption = (data) => {
  return {
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      top: 'top',
      left: 'center',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 30,
      // padding: [15, 4],
      textStyle: {
        rich: {
          name: {
            color: '#bbdbf6',
            fontSize: 14,
            fontWeight: 'normal'
          },
          value: {
            color: '#b58a37',
            lineHeight: 30,
            fontSize: 16,
            fontWeight: 'bold'
          }
        }
      },
      // formatter: function (name) {
      //   // 使用富文本格式
      //   return '{name|' + name + '} \n {value|' + data[name].reduce((a, b) => a + b, 0) + '}套';
      // }
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '23%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.cityNames,
    },
    yAxis: {
      type: 'value'
    },
    series: data.reList.map((item, i) => {
      return {
        name: item.name,
        type: 'bar',
        itemStyle: {
          color: barColors[i],
        },
        emphasis: {
          focus: 'series'
        },
        data: item.value,
      }
    })
  }
}
const securityHouseChartBarRef = ref(null)
const securityNonHouseChartBarRef = ref(null)

const updateChartBarSecurityHouse = (data) => {
  securityHouseChartBarRef.value?.updateOption(getBarChartOption(data))
}
const updateChartBarSecurityNonHouse = (data) => {
  securityNonHouseChartBarRef.value?.updateOption(getBarChartOption(data))
}

const reqData = () => {
  Promise.all([
    getHouseOverview(),
    getHouseSecurity({ type: '住宅' }),
    getHouseSecurity({ type: '非住宅' }),
  ]).then(([houseOverview, houseSecurity, houseSecurityNonHouse]) => {
    if (houseOverview.success) {
      updateChartHouseOverview(houseOverview.data)
    }
    if (houseSecurity.success) {
      updateChartBarSecurityHouse(houseSecurity.data)
    }
    if (houseSecurityNonHouse.success) {
      updateChartBarSecurityNonHouse(houseSecurityNonHouse.data)
    }
  })
}

onMounted(() => {
  reqData()
})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="保障房概览" class="house-total">
      <div class="total-buildings">
        <div class="total-head head">
          <span class="head-title">座落数</span>
          <span class="head-value">
            <span class="value">{{ totalBuilding }}</span>
            <span class="unit">幢</span>
          </span>
        </div>
        <div class="chart">
          <draw-echarts
            ref="totalBuildingChartRef"
            width="420"
            height="120"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
      <div class="total-area">
        <div class="head">
          <span class="head-title">建筑总面积</span>
          <span class="head-value">
            <span class="value">{{ totalArea }}</span>
            <span class="unit">万平</span>
          </span>
        </div>
        <div class="chart">
          <draw-echarts
            ref="totalAreaChartRef"
            width="420"
            height="120"
            :options="{}"
          ></draw-echarts>
          <draw-echarts
            ref="rentRateChartRef"
            width="420"
            height="140"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
    </card>
    <card name="保障住宅" class="house-security">
      <div class="chart">
        <draw-echarts
          ref="securityHouseChartBarRef"
          width="420"
          height="160"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
    <card name="保障非住宅" class="house-nonsecurity">
      <div class="chart">
        <draw-echarts
          ref="securityNonHouseChartBarRef"
          width="420"
          height="160"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  // .title-icon {
  //   display: inline-flex;
  //   background-repeat: no-repeat;
  //   background-size: 100% 100%;
  //   height: 61px;
  //   position: relative;
  //   bottom: 20px;
  //   // margin-top: 10px;
  // }

  .house-total {
    height: 480px;
    margin-bottom: var(--card-margin-bottom);

    .head {
      background: linear-gradient(90deg, #1f3158 0%, #01153c 100%);
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      color: #ffffff;

      .head-title {
        font-family: Source Han Sans SC;
        font-weight: 500;
        font-size: 16px;
        margin-left: 16px;
      }

      .head-value {
        font-family: Source Han Sans SC;
        font-weight: 500;
        font-size: 16px;
        margin-right: 10px;
        .value {
          font-size: 18px;
          color: #5db1ed;
        }
        .unit {
          font-size: 14px;
          margin-left: 10px;
        }
      }
    }

  }

  .house-security {
    height: 200px;
    margin-bottom: var(--card-margin-bottom);
  }

  .house-nonsecurity {
    height: 315px;

    .flex{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .box {
        width: 40%;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        color: #bbdbf6;
        // background: linear-gradient(90deg, #072f59 0%, #08062f 100%);
        background-image: url('@/assets/imgs/house_rent_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .box-title { 
          text-align: center;
          margin-bottom: 10px;
        }
        .box-value { 
          text-align: center;
          .value { 
            font-size: 24px;
            font-weight: bold;
            color: #f9fdff;
          }
          .unit { 
            font-size: 16px;
            color: #9eb2d5;
          }
        }

      }
    }
  }
}
</style>
